<template>
  <div>
    <!-- 
      v-model 这个指令可以实现表单控件中数据与视图的双向绑定
      1. 数据改变 => 视图自动同步
      2. 视图改变 => 数据自动同步
    -->

    <!-- 1. input type="text" 将 value 属性替换成 v-model -->
    <input type="text" v-model="inputValue" />
    <hr />
    <!-- 2. 下拉选择框 select 将 name 属性替换成 v-model -->
    <select v-model="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="深圳">深圳</option>
    </select>
    <hr />
    <!-- 3. 单选框 将 name 属性替换成 v-model -->
    <input type="radio" value="男" v-model="sex" /> 男
    <input type="radio" value="女" v-model="sex" /> 女
    <hr />
    <!-- 4. 复选框
      将 name 属性替换成 v-model => v-model中绑定一个数组，选中项就是数组中的每一个元素
      将 name 属性替换成 v-model => v-model绑定的是一个非数组， 当切换选择状态时会以布尔值的形式来做状态的切换
    -->
    <input type="checkbox" value="唱" v-model="hobby" /> 唱
    <input type="checkbox" value="跳" v-model="hobby" /> 跳
    <input type="checkbox" value="rap" v-model="hobby" /> rap
    <hr />

    <input type="checkbox" value="唱" v-model="hobby1" /> 唱
    <input type="checkbox" value="跳" v-model="hobby2" /> 跳
    <input type="checkbox" value="rap" v-model="hobby3" /> rap
    <hr />
    <!-- 5. 文本域 将双标签中的内容 替换为 标签内的 v-model指令 -->
    <textarea v-model="textarea"></textarea>
  </div>
</template>

<script>
export default {
  name: 'DemoIndex05',
  data () {
    return {
      inputValue: '123',
      city: '',
      sex: '',
      hobby: [],

      hobby1: '',
      hobby2: false,
      hobby3: 0,

      textarea: '333'
    }
  }
}
</script>

<style>

</style>